<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">-->
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <script type="text/javascript" src="vue.js"></script>
</head>
<body>
<div id="app-1">
    {{ message }}
</div>
<div id="app-2">
    <ul style="list-style: decimal">
        <li v-for="i in a" v-on:click="touch">{{ i }}</li>
    </ul>
</div>
<div id="app-3">
    <span v-once>This will never change: {{ msg }}</span>
    <br>
    <span>{{msg}}</span>
    <div v-html="rawHtml"></div>
</div>
<hr>
<div id="app-4">
    <div v-bind:id="dynamicId">{{dynamicId.split('').reverse().join('')}}</div>
    <button v-bind:disabled="!someDynamicCondition" v-on:click="changeBtn">{{someDynamicCondition}}</button>
    <br>
    <p v-if="seen">Now you see me</p>
    <br>
    <a v-bind:href="url">{{url|upper}}</a>
    <br>
    <a :href="url">{{url|upper}}</a>
</div>
</body>
</html>

<script type="text/javascript">
    new Vue({
        el: "#app-1",
        template: "<p>this.message</p>",
        data: {
            message: "what's fuck"
        }
    });
    var data = {
        a: {
            a: "fuck1",
            b: "fuck2",
            c: "fuck3",
            d: "fuck4",
            e: "fuck5"
        },
        b: 2,
        c: 3
    };
    var vm = new Vue({
        el: "#app-2",
        data: data,
        methods: {
            touch: function () {
                console.log(this.a.i);
            }
        },
        created: function () {
            console.log("create")
        },
        beforeCreate: function () {
            console.log("beforeCreate")
        },
        beforeMount: function () {
            console.log("beforeMount")
        },
        mounted: function () {
            console.log("mounted")
        },
        beforeDestroy: function () {
            console.log("beforeDestroy")
        },
        destroyed: function () {
            console.log("destroyed")
        }
    });
    console.log(vm.a);
    console.log(vm.$el);
    console.log(vm.$data);

    var app3 = new Vue({
        el: "#app-3",
        data: {
            msg: "msg",
            rawHtml: "<i>html</i>"
        }
    });
    app3.$data.msg = new Date().getFullYear().toString();

    var app4 = new Vue({
        el: "#app-4",
        data: {
            dynamicId: "dynamicId",
            someDynamicCondition: true,
            seen: false,
            url: "//www.baidu.com"
        },
        methods: {
            changeBtn: function () {
                this.seen = !this.seen;
            }
        },
        filters:{
            upper:function (value) {
                if (value){
                    return value.toString().toUpperCase()
                }
            }
        }
    })
</script>